<template>
  <div class="main-container" id="main-apsas">
    <!-- 排产模式选择 -->
    <div class="containersty">
      <div style="text-align:center;">
        <span class="containersty-title">排产模式设置</span>
      </div>
      <div class="xuzenr">
        <div>
          <a-checkbox value=0 v-model="checked1" @change="gdChange">
            <span style="font-size:21px;">工段排产</span>
          </a-checkbox>
        </div>
        <div>
          <a-checkbox value=1 v-model="checked2" @change="gxChange">
            <span style="font-size:21px;">工序排产</span>
          </a-checkbox>
        </div>
      </div>
      <div style="margin-top:10%;height:100px;"></div>
    </div>
  </div>
</template>

<script lang="ts">
import { post, get } from "@/api/http";
import { Form, Message, Modal, Pagination } from "@arco-design/web-vue";
import { defineComponent, reactive, ref, onMounted } from 'vue'
export default defineComponent({
  name: 'productionSchedulingModeSelection',
  setup() {
    function doRefresh() {
      post({
        url: "/aps/schedulMode/setMode",
        data: {
          schedulMode: schedulMode.value
        },
      })
        .then(({ data, code }: any) => {
          //console.log(data, 66666666666666666666)
        })
        .catch(console.log).finally(() => {

        })
    }
    const checked1 = ref(true);
    const checked2 = ref(false);
    const schedulMode = ref(0);
    const gdChange = (value) => {
      // console.log(value,11111111111111111)
      if (value == true) {
        checked2.value = false;
        schedulMode.value = 0;
        post({
          url: "/aps/schedulMode/setMode",
          data: {
            schedulMode: schedulMode.value
          },
        })
          .then(({ data, code }: any) => {
            if (code === 200) {
              Message.success({
                content: "工段模式设置成功",
                duration: 5000,
              });

            }
          })
          .catch(console.log).finally(() => {

          })
      } else {
        checked2.value = true;
        schedulMode.value = 1;
        post({
          url: "/aps/schedulMode/setMode",
          data: {
            schedulMode: schedulMode.value
          },
        })
          .then(({ data, code }: any) => {
            if (code === 200) {
              Message.success({
                content: "工序模式设置成功",
                duration: 5000,
              });
            }
          })
          .catch(console.log).finally(() => {

          })
      }
    }
    const gxChange = (value) => {
      // console.log(value,22222222222222222)
      if (value == true) {
        checked1.value = false;
        schedulMode.value = 1;
        post({
          url: "/aps/schedulMode/setMode",
          data: {
            schedulMode: schedulMode.value
          },
        })
          .then(({ data, code }: any) => {
            if (code === 200) {
              Message.success({
                content: "工序模式设置成功",
                duration: 5000,
              });
            }
          })
          .catch(console.log).finally(() => {

          })
      } else {
        checked1.value = true;
        schedulMode.value = 0;
        post({
          url: "/aps/schedulMode/setMode",
          data: {
            schedulMode: schedulMode.value
          },
        })
          .then(({ data, code }: any) => {
            if (code === 200) {
              Message.success({
                content: "工段模式设置成功",
                duration: 5000,
              });
            }
          })
          .catch(console.log).finally(() => {

          })
      }
    }
    onMounted(() => {
      doRefresh();
    });
    return {
      checked1,
      checked2,
      gdChange,
      gxChange,
      schedulMode
    }
  },
})
</script>
<style  lang="less">
#main-apsas {
  height: 100%;

  .containersty {
    width: 390px;
    margin: 10% auto;
  }

  .containersty-title {
    font-size: 26px;
    font-weight: 600;
    color: #1d2129;
  }

  .xuzenr {
    display: flex;
    justify-content: space-between;
    margin-top: 25px;
  }

  .arco-checkbox-icon {
    width: 20px !important;
    height: 20px !important;
  }

  .arco-checkbox-icon-check {
    width: 14px;
  }
}
</style>